<template>
  <div class="container">
    <el-card class="container-result">
      <thy-caption title="查询结果" margin> </thy-caption>
      <el-table size="small" stripe border :data="list" v-loading="loading">
        <el-table-column prop="id" label="ID" width="60" align="center" />
        <el-table-column prop="username" label="名称" />
        <el-table-column prop="nickname" label="昵称" />
        <el-table-column prop="avatar" label="性别" width="60" align="center">
          <template slot-scope="scope">
            <span>{{ +scope.row.sex ? '男' : '女' }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="avatar" label="头像" width="80" align="center">
          <template slot-scope="scope">
            <img :src="scope.row.avatar" alt="" width="60" />
          </template>
        </el-table-column>
        <el-table-column prop="openid" label="OPENID" width="220" />
        <el-table-column prop="created_at" label="注册日期" />
      </el-table>
      <el-pagination
        background
        layout="total, prev, pager, next, jumper"
        @current-change="paginationHandle"
        :current-page="page"
        :total="total"
      >
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'user',
  data() {
    return {
      loading: true,
      list: [],
      total: 0,
      page: 1
    };
  },
  methods: {
    getData(page = 1) {
      this.loading = true;
      this.$request
        .get('/admin/user/list', {
          params: {
            page,
            pageSize: 10
          }
        })
        .then(data => {
          this.page = page;
          this.list = data.rows;
          this.total = data.count;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    paginationHandle(page) {
      this.getData(page);
    }
  },
  created() {
    this.getData();
  }
};
</script>

<style>
</style>
